<!--
 * @Author: your name
 * @Date: 2020-09-18 16:00:20
 * @LastEditTime: 2020-09-18 17:56:52
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \tinkjsDemo\antd-vue-pro\src\views\guide.vue
-->
<template>
  <div>
    <div class="header">
      <div
        class="content head-txt padding40"
      >数字孪生（Digital Twin）是物理实体在数字虚体中的精确映射，在工业4.0体系和智能制造中扮演着关键的角色。作为物理实体的虚拟模型，而不是使用物理性能数据预测行为，数字孪生体一直被视为诊断、维护和产品创新的关键。数字孪生系统被广泛应用于各行业，尤其是工业互联网行业，其不仅具有描述的多样性，还具有服务的多样性。</div>
    </div>
    <div class="menu content">
      <a-row :gutter="20">
        <a-col :span="8">
          <div class="item">
            <div class="bg1 head"></div>
            <div class="m-cont">
              <div class="m-head">模拟设备的功能机理</div>
              <div class="m-txt">
                运用人工智能和大数据分析，得到设备的工况状态、能
                耗分析等数据结果，在实现生产监控的同时，搭建设备
                健康模型。
              </div>
            </div>
          </div>
        </a-col>
        <a-col :span="8">
          <div class="item">
            <div class="head bg2"></div>
            <div class="m-cont">
              <div class="m-head">智能服务</div>
              <div class="m-txt">
                第一时间获取设备报警信息，并根据实时数据准确判断
                故障状态，分析成因，节省售后服务成本和时间，提升
                客户的满意度，避免停机带来的不必要损失。
              </div>
            </div>
          </div>
        </a-col>
        <a-col :span="8">
          <div class="item">
            <div class="head bg3"></div>
            <div class="m-cont">
              <div class="m-head">物联呈现</div>
              <div class="m-txt">
                根据工业云平台提供的数据，运用可视化呈现，并通过
                云控制实现对设备的远程指令下发和系统升级等功能，
                以最优的能耗管理和任务分派，提升产能，实现产线自
                动化和设备的数字化管理。
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>
    <div class="layout1">
      <div class="content">
        <div class="l-head">数字可视化</div>

        <div class="l-cont">
          <a-row :gutter="40">
            <a-col :span="12">
              <img class="lefeImg" style="margin-top:30px" :src="pg1.default" />
            </a-col>
            <a-col :span="12">
              <p class="l-txt">
                数字可视化是对生产过程中生产操作和生产监控产生的实时数据、设备状态、报警监控、视频监控、经营数据及人员状态的集中可视，起到数字工厂窗口作用。数字可视化通过大数据分析平台对企业各种生产数 据统计分析，以图像、图形、曲线等方式将企业运营的工艺指标、生产数据和经营指标直观呈现，为企业生产协调、经营管理者提供及时、可靠的决策依据。
                <br />
                <br />
                <b>工厂三维建模：</b>
                对整个工厂进行三维建模，实时监控生产运行情况。
                <br />
                <b>报警监控：</b>
                对生产过程中的异常状况进行实时监控，报警信息将会以窗口提示或是图标的方式展示在页面上。
                <br />
                <b>视频监控：</b>
                对生产过程中各工序进行全方位的视频监控，展示工厂的各个生产环节。
                <br />
                <b>统计分析：</b>
                对生产过程中的数据进行实时的统计分析，并以图像、图形、曲线等方式直观呈现。
              </p>
            </a-col>
          </a-row>
        </div>
      </div>
    </div>

    <div class="layout2">
      <div class="content">
        <div class="l-head">生产过程监控</div>

        <div class="l-cont">
          <a-row :gutter="40">
            <a-col :span="12">
              <p class="l-txt">
                生产过程监控能对生产过程进行实时的状态监控，对出现的异常情况进行报警、提醒，并推送到相关控制系统或人员采取行动，实现整个现场生产过程透明化和异常的及时发现，减少异常对生产过程的影响。
                <br />
                <br />
                <b>工艺流程监控：</b>
                实时监控生产过程中各个工序的投入产出情况。
                <br />
                <b>设备状态监控：</b>
                通过对设备数据采集，实时监控设备的运行状态，对设备数据进行分析，对异常数据进行报警。
                <br />
                <b>能源消耗监控：</b>
                对厂内的水、电、风、气、煤等能源消耗进行监控。
                <br />
              </p>
            </a-col>
            <a-col :span="12">
              <img class="lefeImg" style="margin-top:0px" :src="pg2.default" />
            </a-col>
          </a-row>
        </div>
      </div>
    </div>

    <div class="layout1">
      <div class="content">
        <div class="l-head">生产管理监控</div>

        <div class="l-cont">
          <a-row :gutter="40">
            <a-col :span="12">
              <img class="lefeImg" style="margin-top:30px" :src="pg3.default" />
            </a-col>
            <a-col :span="12">
              <p class="l-txt">
                生产管理监控能实现生产管理流程的透明化。通过对生产管理中的各个流程节点进行监控统计，对延误和异 常进行报警提醒并推送到相关系统或人员采取行动，确保生产管理的高效运行。
                <br />
                <br />
                <b>计划管理监控：</b>
                通过对生产数据的分析，实现对生产计划的管理，通过每日对生产数据的统计，达到对生产计划的管理监控。
                <br />
                <b>质量管理监控：</b>
                通过系统对物料入厂质量、中间物料质量、半成品、成品质量的跟踪，对整个生产的质量管理进行全面的监控。
                <br />
                <b>安环管理监控：</b>
                通过设备的检维修记录，危险源、危险作业，安环指标等信息的管理，实现厂内的安环监控。
                <br />
              </p>
            </a-col>
          </a-row>
        </div>
      </div>
    </div>
    <div class="layout2">
      <div class="content">
        <div class="l-head">生产安全监控</div>

        <div class="l-cont">
          <a-row :gutter="40">
            <a-col :span="12">
              <p class="l-txt">
                <br />
                <br />
                <br />
                <br />
生产安全监控系统由视频事件报警系统、设备报警系统及人员定位及报警系统三个子系统组成，通过摄像机监视及录像，与入侵报警探测器、门禁等设备紧密结合，及时发现异常情况、设备故障、生产事故及非法侵入，及时报警并采取相应的预案联动；可记录并查询事件发生前后的信息，提高人员及设备工作状态管理、突发事件应急处置水平，最大限度的避免生产过程中的安全问题。
              </p>
            </a-col>
            <a-col :span="12">
              <img class="lefeImg" style="margin-top:30px" :src="pg4.default" />
            </a-col>
          </a-row>
        </div>
      </div>
    </div>

    <div class="layout1  ">
      <div class="content">
        <div class="l-head">整体成效分析</div>

       <img src="" alt="">
      </div>
    </div>
  </div>
</template>


<script>
export default {
  mounted() {
    console.log(this.pg1)
  },
  data() {
    return {
      pg1: require('../assets/guide/pg1.jpg'),
      pg2: require('../assets/guide/pg2.jpg'),
      pg3: require('../assets/guide/pg3.jpg'),
      pg4: require('../assets/guide/pg4.jpg'),
    }
  },
}
</script>


<style lang="scss">
.header {
  width: 100%;
  box-sizing: border-box;
  height: 480px;
  background-image: url(~@/assets/guide/banner.jpg);
  background-position: top center;

  .head-txt {
    font-size: 18px;
    color: #fff;
    padding-top: 290px;
  }
}
.content {
  box-sizing: border-box;
  width: 1200px;
  margin: 0 auto;
}
.layout1 {
  padding: 15px 0;
  background: #f0f0f0;
}
.layout2 {
  padding: 15px 0;
}
.lefeImg {
  width: 600px;
  height: 340px;
  float: left;
  margin-right: 40px;
}
.l-head {
  font-size: 22px;
  line-height: 1em;
  margin: 30px 0;
  padding-left: 10px;
  border-left: 3px solid #004dd3;
}
.l-txt {
  text-indent: 2em;
  font-size: 16px;
  line-height: 2em;
}
.padding40 {
  padding: 40px;
}
.menu {
  padding: 50px 0;
  color: #fff;

  .head {
    height: 160px;
  }
  .item {
    background: #4e80df;
    .m-cont {
      min-height: 223px;
      padding: 20px;
      .m-head {
        font-size: 20px;
        font-weight: bold;
        line-height: 2em;
        padding-bottom: 15px;
      }
      .m-txt {
        width: 100%;
        font-size: 16px;
        line-height: 2em;
      }
    }
  }
  .bg1 {
    background: url(~@/assets/guide/menu1.jpg) top center;
  }
  .bg2 {
    background: url(~@/assets/guide/menu2.jpg) top center;
  }
  .bg3 {
    background: url(~@/assets/guide/menu3.jpg) top center;
  }
}

.footer {

  .head {
    height: 160px;
  }
  .item {
    background: #4e80df;
    .m-cont {
      min-height: 223px;
      padding: 20px;
      .m-head {
        font-size: 20px;
        font-weight: bold;
        line-height: 2em;
        padding-bottom: 15px;
      }
      .m-txt {
        width: 100%;
        font-size: 16px;
        line-height: 2em;
      }
    }
  }
  .bg1 {
    background: url(~@/assets/guide/menu1.jpg) top center;
  }
  .bg2 {
    background: url(~@/assets/guide/menu2.jpg) top center;
  }
  .bg3 {
    background: url(~@/assets/guide/menu3.jpg) top center;
  }
}
</style>